<template>
	<view clsss="warp">
		<view class="body">
			<scroll-view scroll-y :style="[{height: height + 'px'}]" lower-threshold="200">
				<view class="card" v-for="(item,index) in deviceAnnualFeeList" :key="index">
					<view class="u-flex u-row-between">
						<view class="left-style">续费时间</view>
						<view class="right-style" v-if="item.defaultMode == 1">1年</view>
						<view class="right-style" v-if="item.defaultMode == 2">1个月</view>
					</view>
					<view class="u-flex u-row-between u-m-t-20">
						<view class="left-style">单台设备续费金额</view>
						<view class="right-style">{{item.unitPrice.toFixed(2)}}元</view>
					</view>
					<view class="u-flex u-row-between u-m-t-20">
						<view class="left-style">设备数量</view>
						<view class="right-style">{{item.countNum}}台</view>
					</view>
					<view class="u-flex u-row-between u-m-t-20">
						<view class="left-style">合计费用</view>
						<view class="right-style">{{item.unitPrice*item.countNum.toFixed(2)}}元</view>
					</view>
					<view class="u-flex u-row-between u-m-t-20">
						<view class="left-style">应付金额</view>
						<view style="color: rgb(253, 73, 88)">{{item.unitPrice*item.countNum.toFixed(2)}}元</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="footer" id="footer">
			<view style="margin: 0 30rpx 10rpx;display: flex;justify-content: flex-end;">
				<view class="right-style">
					总共：{{totalMoney.toFixed(2)}}元
				</view>
			</view>
			<view style="margin: 0 30rpx;">
				<u-button type="primary" :customStyle="nextStepBtnCustomStyle" shape="circle"
					@click="toPay()">立即支付</u-button>
			</view>
		</view>

		<u-popup :show="buyShow" close-icon-pos="top-right" @close="close()" round="10">
			<view class="modal-box">
				<view class="prompt-text">请选择续费时间</view>
				<scroll-view scroll-y :style="{ height:  '684rpx'}" class="content">
					<u-grid :border="false">
						<u-grid-item v-for="(item, index) of rechargePackageList" :key="index"
							@click="rechargePackagePay(item)">
							<view :class="indexId == item.id?'content-item-check':'content-item'">
								<view class="name">{{item.name}}</view>
								<view class="content-item-title">{{item.price}}元</view>
							</view>
						</u-grid-item>
					</u-grid>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nextStepBtnCustomStyle: {
					background: 'rgb(96, 114, 255)',
				},
				buyShow: false,
				height: 0,
				indexId: 1,
				deviceAnnualFeeList: [],
				totalMoney: 0,
				idList: []
			};
		},
		onReady() {
			this.getPomHeight();
		},
		onLoad(options) {
			this.idList = JSON.parse(options.idList)
			let param = {
				idList: this.idList
			}
			this.findStatisticsById(param);
		},
		methods: {

			toPay() {
				uni.showLoading({
					title: '支付中...',
					mask: true
				});
				let param = {
					idList: this.idList
				}
				this.$api('deviceAnnualFeeRecord.pay', param).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						// 去调起微信支付
						let payInfo = res.data;
						uni.requestPayment({
							'timeStamp': payInfo.timeStamp,
							'nonceStr': payInfo.nonceStr,
							'package': payInfo.package,
							'signType': payInfo.signType,
							'paySign': payInfo.paySign,
							success: (res) => {
								uni.navigateBack();
							},
							fail: (res) => {
							}
						})
					} else {
						getApp().err("支付不成功，" + res.msg);
					}
				});
			},

			getPomHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#footer').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight - 20
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			},
			findStatisticsById(param) {
				this.$api('deviceAnnualFee.findStatisticsById', param).then(res => {
					if (res.status == 0) {
						this.deviceAnnualFeeList = res.data
						this.deviceAnnualFeeList.forEach(item => {
							this.totalMoney += item.countNum * item.unitPrice
						})
					} else {
						this.$helpers.toast("查询数据失败", res.msg);
					}
				})
			},
			close() {
				this.buyShow = false
			},
			rechargePackagePay(data) {
				this.indexId = data.id
			},
		}
	}
</script>

<style lang="scss">
	.body {
		margin: 19rpx 24rpx;
	}

	.footer {
		z-index: 99;
		border-top: 1px solid #fafafa;
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		padding: 30rpx 0rpx;
		font-size: $f-lg;
	}

	.card {
		margin: 0 26rpx 26rpx;
		background: white;
		padding: 35rpx 30rpx;
		border-radius: 20rpx;
		font-size:  $f-lg;
	
		.left-style {
			color: rgba(0, 0, 0, 0.6);
		}

		.right-style {
			color: rgba(0, 0, 0, 0.9);
		}
	}

	.modal-box {
		.prompt-text {
			text-align: center;
			font-size: 36rpx;
			color: rgb(34, 34, 34);
			margin-top: 30rpx;
		}

		.content-item-check {
			background: rgb(222, 206, 193);
			padding: 30rpx;
			margin-top: 30rpx;
			color: rgb(213, 83, 83);

			.content-item-title {
				text-align: center;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: rgb(213, 83, 83);
			}

			.name {
				font-size: 28prx;
				color: rgb(213, 83, 83);
			}
		}

		.content-item {
			background: rgb(246, 246, 246);
			padding: 30rpx;
			margin-top: 30rpx;

			.content-item-title {
				text-align: center;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: rgb(170, 170, 170);
			}

			.name {
				font-size: 28prx;
				color: rgb(153, 153, 153);
			}
		}
	}
</style>
